<template>
      <div class="home">
        <el-card>
          <div slot="header" class="cardName">
            <h4>待办理事务</h4>
          </div>
           <div class="card-body">
                <el-row type="flex" justify="space-around" v-for="(item,index) in info" :key="index">
                    <el-col :span="12">
                      <el-checkbox id="checkbox" disabled v-model="item.state"></el-checkbox>
                      <label for="checkbox">{{index+1}}-{{item.title}}</label>
                    </el-col>                                                                        
                    <el-col :span="12" class="col2">
                        <el-button type="primary" class="finsh" v-if="!item.state" v-on:click="item.state=true">完成</el-button>
                        <el-button type="danger" class="dele" v-on:click="splice">删除</el-button>
                    </el-col>
                </el-row>
            </div>
                <div>
                    <el-row>
                      <el-col :span="18" class="inputs">
                        <el-input placeholder="请填写事项" v-model="msg"/>
                      </el-col>
                      <el-col :span="6">
                        <div>
                            <el-button type="primary" v-on:click="add">添加</el-button>
                        </div>
                      </el-col>
                    </el-row>
                </div>
        </el-card>
      </div>
</template>

<script>


export default {
 
  mounted() {
    this.$store.dispatch('getinfo').then(results=>{
      this.info=results
    })
  },
  data:function(){
               return{
                info:{
            type:Object,
            default:function(){
                return[];
            }
        },
                msg:''
               }
           },
           methods:{
            splice(){
                    this.info.splice(this.index,1)
                },
               add(){
                   this.info.push({title:this.msg,state:false})
                  
               }
           }
}
</script>
<style scoped>
  .el-card /deep/ .el-card_header{
    padding: 0;
  }
  header{
    padding: 0;
  }
  h4{
    margin: 0;
  }
  ul,li{
    list-style: none;
  }
 .home{
   width: 450px;
   height: 500px;
   margin-top: 3rem;
   margin-left: 40rem;
 }
 .cardName{
   font-size:2.3rem;
   text-align: center;
   background-color: black;
   color: white;
    padding: 0rem;
    margin: 0;
 }
  .col2{
   margin-top:-2rem;
   margin-bottom: 1rem;
 }
 .dele{
   margin-top: 2rem;
 }
 
 

</style>